<template>
  <p>
    <el-dialog title="课程列表" :visible.sync="adcourse" width="700px">
      <el-tree
        :data="getCatebag"
        node-key="ID"
        :check-on-click-node="true"
        :expand-on-click-node="true"
        @node-click="getdata"
        :highlight-current="true"
        :props="defaultProps"
      ></el-tree>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibled" width="700px">
      <el-transfer
        v-model="selectdata"
        :data="this.tpdata.map(v=> { return { key:v.ID, label: namejisuan(v) } } )"
        v-loading="loading"
        filterable
        :filter-method="filterMethod"
      ></el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adcourse = false">取 消</el-button>
        <el-button type="primary" @click="addcourse">确 定</el-button>
      </span>
    </el-dialog>
  </p>
</template>

<script>
import { asyncaddUsercouser } from "../../../plugins/api.js";
import { mapGetters } from "vuex";
export default {
  name: "addusercourseall",
  props: ["multipleSelection"],
  computed: mapGetters(["getCourse", "getCatebag", "getCoursecatebag"]),
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name"
      },
      dialogVisible: false,
      dialogVisibled: false,
      adcourse: false,
      loading: false,
      selectdata: [],
      courses: [],
      tpdata: []
    };
  },
  async mounted() {
    this.start();
  },
  methods: {
    getdata(a) {
      this.tpdata = [];
      this.dialogVisibled = true;
      for (let v of this.getCoursecatebag) {
        if (v.catebagid == a.ID && this.getCourse.find(c => c.ID == v.cid)) {
          this.tpdata.push(this.getCourse.find(s => s.ID == v.cid));
        }
      }
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    async start() {
      this.selectdata = [];
    },
    namejisuan(course) {
      return `${course.ID}${course.name}${course.paixu}`;
    },
    courseSelectionChange(value) {
      this.courses = value;
    },
    async addcourse() {
      // 选中的用户
      this.loading = true;
      const multipleSelection = this.multipleSelection();
      for (let v of multipleSelection) {
        // 选中的课程
        if (v.usertype == "Tourist") {
          this.$notify({
            title: "提示",
            message: `请把${v.username}的用户类型进行更改`,
            duration: 5000
          });
        } else {
          console.log(this.selectdata);
          for (let vo of this.selectdata) {
            await asyncaddUsercouser({
              uid: v.userid,
              cid: vo
            });
          }
        }
      }
      this.selectdata = [];
      this.adcourse = false;
      this.loading = false;
    }
  }
};
</script>

<style scoped>
p {
  display: inline-block;
}
</style>


